import React from 'react';
import { Transition } from 'react-transition-group';
import Flex from '../../../shared/ui/Flex/Flex';
import { StyledNav, StyledNavLink } from './Sidebar.styled';
import styles from './Sidebar.module.scss';
import { StyledMediumText } from '../../settings/settingsMenu/MediumText.styled';
import AuthProviderContext, { IAuthProvider } from '../../../context/AuthProviderContext';

/**
 * @function Sidebar - Отображает компонент боковой панели.
 * @param { boolean } - Состояние бокового меню открыто/закрыто.
 * @returns { React.JSX.Element } -Компонент бокового меню.
 */
const Sidebar: React.FC<{ isOpenMenu: boolean }> = ({ isOpenMenu }): React.JSX.Element => {

    const ref = React.useRef<HTMLElement>(null);

    const {availableRoutes} = React.useContext<IAuthProvider>(AuthProviderContext);

    return (
        <Transition
            in={isOpenMenu}
            timeout={1000}
            unmountOnExit
            nodeRef={ref}
        >
            {
                (state) =>
                (
                    <StyledNav
                        className={`transition-${state}`}
                        tabIndex={0}
                        id="sidebar"
                        ref={ref}
                    >
                        {
                            availableRoutes.map((route) =>
                                <StyledNavLink
                                    key={route.path}
                                    to={route.path}
                                >
                                    <Flex className={styles.iconContainer}>
                                        {route.element.icon}
                                    </Flex>
                                    <StyledMediumText>{route.element.label}</StyledMediumText>
                                </StyledNavLink>
                            )
                        }
                    </StyledNav>
                )
            }
        </Transition>
    );
};

export default Sidebar;